<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-01 16:39:03
 * @LastEditors: 171
 * @LastEditTime: 2022-09-01 23:07:39
-->
<script setup lang='ts'>

  import { onMounted } from 'vue'
  import { storeToRefs } from 'pinia'
  import * as echarts from 'echarts';
  import useStore from '../../stores'
  import '../../assets/china'
  import { geoCoordMap } from '../../assets/geoMap'

  const { listState } = useStore()
  const { list, items } = storeToRefs(listState)

  const initCharts = () => {
    const city = list.value.diseaseh5Shelf.areaTree[0].children
    // items.value = city[3].children!;
    const data = city.map((province)=>{
      return {
        name: province.name,
        value: geoCoordMap[province.name].concat(province.total.nowConfirm),
        children: province.children
      }
    })
    const charts = echarts.init(document.getElementById('china') as HTMLElement)
    charts.setOption({
      // backgroundColor: "black", // 背景颜色
      geo: {
        map: "china",
        aspectScale: 0.8,
        layoutCenter: ["50%", "50%"],
        layoutSize: "100%",
        itemStyle: {
          areaColor: {
            type: "linear-gradient",
            x: 0,
            y: 1200,
            x2: 1200,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#152E6E", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0673AD", // 50% 处的颜色
              },
            ],
            global: true, // 缺省为 false
          },
          shadowColor: "#0f5d9d",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          opacity: 0.5,          
        },
        emphasis: {
          areaColor: "#0f5d9d",
        },
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              areaColor: "rgba(0, 10, 52, 1)",
              borderColor: "rgba(0, 10, 52, 1)",
              opacity: 0,
              label: {
                show: false,
                color: "#009cc9",
              },
            },
            label: {
              show: false,
              color: "#FFFFFF",
              fontSize: 12,
            },
          },
        ],
      },
      series: [
        {
          type: "map",
          // selectedMode: "multiple",
          map: "china",
          aspectScale: 0.8,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "100%",
          zoom: 1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1,
            max: 2,
          },
          label: {
            show: true, // 字体是否显示
            color: "#FFFFFF",
            fontSize: 15,
          },
          itemStyle: {           
            areaColor: "#0c3653",
            borderColor: "#1cccff",
            borderWidth: 1.8,
          },
          emphasis: {
            areaColor: "#56b1da",
            label: {
              show: true,
              color: "#fff",
            },
          },
          data: data,
        },
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          // symbol: 'image://http://ssq168.shupf.cn/data/biaoji.png',
          // symbolSize: [30,120],
          // symbolOffset:[0, '-40%'] ,
          symbol: "pin",
          symbolSize: [30, 30],
          label: {
            show: true,
            color: "#fff",
            formatter(value: any){
              return value.data.value[2]
            }
          },
          itemStyle: {
            color: '#1E90FF', //标志颜色
          },
          data: data,
        },
      ],
    })
    charts.on('click', (e)=>{
      const province = e.data as any
      items.value = province.children;
      items.value.forEach((item)=>{
        (item as any).key = Symbol()
      })
    })
  }

  onMounted(() => {
    initCharts()
  })
  
  
</script>

<template>

  <div id="china" class="charts"></div>

</template>

<style scoped lang='less'>
.charts{
  flex: 1;
}
</style>